
/************************** box Start *********************/

.box{
    width: 10rem;               /* 375px */
    height: 21.653333rem;       /* 812px */
}

/************************** box End *********************/


/************************** top Start *********************/

.top{
    width: 10rem;               /* 375px */
    height: 6.88rem;            /* 258px */
    background:url(../img/top01.png) no-repeat; 
    background-size: 10rem 5.28rem;
    position: relative;
}

.top>div:nth-of-type(1) {
    display: flex;
    justify-content: space-between;
    margin: 0 .533333rem;
}

.top .sel {
    display: flex;
    width: 4.133333rem;
    height: .8rem;
    border-radius: .4rem;
    background: #fff;
    font-size: .32rem;
    color: #24282E;
    line-height: .8rem;
    margin-top: 1.386667rem;
    justify-content: space-around;
    align-items: center;
}
.top .sel img {
    width: .64rem;
    height: .64rem;
}
.top .sel .sj { 
    border-top: .266667rem solid #241E1E;
    border-left: .133333rem solid rgba(255, 255,255, 0);
    border-right: .133333rem solid rgba(255, 255,255, 0);
}

.top #house {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    background: #fff;
    line-height: .8rem;
    margin-top: 1.386667rem;
}
.top #house img {
    width: .64rem;
    height: .64rem;

}

.top>div:nth-of-type(2) {
    width: 9.226667rem;
    height: 4.426667rem;
    position: absolute;
    top: 2.426667rem;
    left: .4rem;
}
.top>div:nth-of-type(2) img {
    width: 9.226667rem;
    height: 4.426667rem;
    
}


/************************** box End *********************/


/************************** nav Start *********************/

.nav ul {
    display: flex;
    flex-wrap: wrap;
    width: 9.226667rem;
    height: 4.266667rem;
    justify-content: space-around;
    align-content: space-around;
    margin: 0 auto;
}

.nav ul li {
    width: 1.6rem;
    height: 1.653333rem;
    display: flex; 
    flex-wrap: wrap;
    justify-content: center;
    align-content: space-around;
    
}
.nav ul li img {
    display: block;
    width: 1.066667rem;
    height: 1.066667rem;
}
.nav ul li div{
    /* width: 1.493333rem; */
    /* height: .586667rem; */
    font-size: .373333rem;
    color: #24282E;
    line-height: .586667rem;
    text-align: center;
}


/************************** nav End *********************/


/************************** mid1 Start *********************/

.mid1 {
    width: 9.226667rem;
    height: 2.56rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
}

.mid1>div {
    width: 4.533333rem;
    height: 2.346667rem;
    position: relative;
}

.mid1>div:nth-of-type(1){
    background: url(../img/mid103.png);
    background-size: 4.533333rem 2.346667rem;
}
.mid1>div:nth-of-type(1) #ek {
    position: absolute;
    width: 1.733333rem;
    height: .533333rem;
    top: .533333rem;
    left: .8rem;
    font-size: .426667rem;
    font-weight: 600;
    color: #fff;
    background: #FB3E26;
    text-align: center;
    line-height: .533333rem;
}
.mid1>div:nth-of-type(1) #zk {
    position: absolute;
    width: 2.133333rem;
    height: .533333rem;
    top: 1.333333rem;
    left: .533333rem;
    font-size: .426667rem;
    font-weight: 600;
    color: #241E1E;
    text-align: center;
    line-height: .533333rem;
}
.mid1>div:nth-of-type(1) #zk span {
    font-size: .48rem;
    color: #E02020;
}

.mid1>div:nth-of-type(2){
    background: url(../img/mid104.png);
    background-size: 4.533333rem 2.346667rem;
}
.mid1>div:nth-of-type(2) #nk {
    position: absolute;
    top: .32rem;
    left: .16rem;
    width: 2.64rem;
    height: .906667rem;
    color: #fff;
    font-weight: 600;
    text-align: center;
    line-height: .453333rem;
    background: #FB3E26;
    border-radius: .133333rem;
}
.mid1>div:nth-of-type(2) #nk>span {
    display: block;
    font-size: .32rem;
    transform: scale(.9);
}

.mid1>div:nth-of-type(2) #yuan {
    position: absolute;
    top: 1.333333rem;
    left: .32rem;
    width: 2.213333rem;
    height: .666667rem;
}
.mid1>div:nth-of-type(2) #yuan img {
    width: 2.213333rem;
    height: .666667rem;
}


/************************** mid1 End *********************/


/************************** mid2 Start *********************/

.mid2 {
    width: 9.226667rem;
    height: 2.933333rem;
    /* background: yellow;   */
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.mid2 img {
    width: 8.96rem;
    height: 2.56rem;
}


/************************** mid2 End *********************/


/************************** bot Start *********************/

.bot {
    width: 9.226667rem;
    height: 4.533333rem;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
}

.bot div:nth-of-type(1) {
    width: 3.733333rem;
    height: 4.533333rem;
    background: url(../img/fot01.png) no-repeat;
    background-size: 3.733333rem 4.053333rem;
    background-position:center;
}

.bot ul {
    width: 4.8rem;
    height: 4.533333rem;
    
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.bot ul li:nth-of-type(1) {
    width: 4.8rem;
    height: 1.813333rem;
    background: url(../img/fot02.png) no-repeat;
    background-size: 4.8rem 1.813333rem;
    background-position:center;
    margin-top: .266667rem;
}
.bot ul li:nth-of-type(2) {
    width: 2.293333rem;
    height: 2rem;
    background: url(../img/fot03.png) no-repeat;
    background-size: 2.293333rem 2rem;
    background-position:center;
}
.bot ul li:nth-of-type(3) {
    width: 2.293333rem;
    height: 2rem;
    background: url(../img/fot03.png) no-repeat;
    background-size: 2.293333rem 2rem;
    background-position:center;
}


/************************** bot End *********************/

